<template>
    <div class="app-container">
        <div class="app-middle-part">
            <router-view name="breadcrumb" class="app-trajectory-part" />
            <router-view class="app-content-part" />
        </div>
        <router-view name="navigation" class="app-navigation-part" />
        <float-tools />
    </div>
</template>

<script>
    import FloatTools from "./components/widgets/float-tools.vue";

    export default {
        components: {
            [FloatTools.name]: FloatTools
        },
        created () {
            // this.$store.dispatch("options/checkUserIdentity");
            this.$store.commit("options/buildRouterDataset");
            // this.$store.commit("options/consoleRouterDataset");
        }
    }
</script>

<style lang="scss">
    @import "./libs/styles/common.css";
    @import "./libs/styles/mulxdepota.scss";
    
    .app-container {
        width: 76%;
        max-width: 90rem;
        margin: 0rem auto;
        position: relative;

        .app-middle-part {
            width: 100%;
        }

        .app-trajectory-part {
            padding: 1rem 0rem;
            border-bottom: 0.1rem solid $color-ash;
            align-items: center;
        }

        .app-content-part {
            margin: 3.2rem 0rem;
        }

        .app-navigation-part {
            position: absolute;
            top: 0.3rem;
            left: -8rem;
            height: 98vh;
            border-right: solid 1px $color-ash;
            overflow: hidden;

            .el-menu {
                border-right: none !important;
            }
        }
    }
</style>
